<template>
    <div class="tab-scaffold">
        <!-- 顶部工具栏 -->
        <div class="toolbar">
            <div class="left">
                <slot name="toolbar-left" />
            </div>
            <div class="right">
                <slot name="toolbar-right" />
            </div>
        </div>

        <!-- 表格滚动区 -->
        <div class="table-scroll">
            <slot />
        </div>

        <!-- 底部：全选 + 分页 -->
        <div class="table-footer">
            <div class="left">
                <a-checkbox :checked="checkAll" @change="$emit('check-all', $event)">全选</a-checkbox>
            </div>

            <div class="right">
                <span class="stat">本页 {{ pageCount }} 条 共 {{ safeTotal }} 条</span>

                <!-- 仅保留分页，不启用内置 size-changer -->
                <a-pagination :current="safeCurrent" :pageSize="safePageSize" :total="safeTotal" show-less-items
                    show-quick-jumper @update:current="(v) => $emit('update:current', v)" />

                <!-- 自定义“条/页”选择 -->
                <a-dropdown placement="topRight" trigger="['click']">
                    <a-button class="psize-btn">
                        {{ safePageSize }} 条/页
                        <span class="caret">▾</span>
                    </a-button>
                    <template #overlay>
                        <a-menu @click="onChooseSize">
                            <a-menu-item v-for="opt in normalizedPageSizeOptions" :key="String(opt)">
                                {{ opt }} 条/页
                            </a-menu-item>
                        </a-menu>
                    </template>
                </a-dropdown>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { computed } from "vue";

const props = withDefaults(
    defineProps<{
        current: number | string;
        pageSize: number | string;
        total: number | string;
        pageCount: number;
        checkAll: boolean;
        pageSizeOptions?: string[];
    }>(),
    {
        pageSizeOptions: () => ["10", "20", "50"],
    }
);

const emit = defineEmits<{
    (e: "update:current", v: number): void;
    (e: "update:pageSize", v: number): void;
    (e: "check-all", ev: any): void;
}>();

/** 数值兜底，避免 NaN */
const toNum = (v: any, def: number) => {
    const n = Number(v);
    return Number.isFinite(n) && n > 0 ? n : def;
};
const safeCurrent = computed(() => toNum(props.current, 1));
const safePageSize = computed(() => toNum(props.pageSize, 10));
const safeTotal = computed(() => {
    const n = Number(props.total);
    return Number.isFinite(n) && n >= 0 ? n : 0;
});

/** 归一化 pageSize 选项为 number[]，并做默认兜底 */
const normalizedPageSizeOptions = computed(() => {
    const list = (props.pageSizeOptions || [])
        .map((s) => Number(s))
        .filter((n) => Number.isFinite(n) && n > 0);
    return list.length ? list : [10, 20, 50];
});

/** 点击菜单项选择每页条数 */
function onChooseSize(info: { key: string }) {
    const n = Number(info?.key);
    if (Number.isFinite(n) && n > 0 && n !== safePageSize.value) {
        emit("update:pageSize", n);
    }
}
</script>

<style lang="less" scoped>
.tab-scaffold {
    background: #fff;
    border: 1px solid #eaeaea;
    border-radius: 6px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    min-height: 83vh;
    min-width: 0;
}

/* 顶部工具栏 */
.toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 10px;

    .left :deep(.ant-btn) {
        padding: 0 14px;
        height: 30px;
        border-color: #1677ff;
        color: #1677ff;
    }

    .right {
        display: flex;
        align-items: center;
    }
}

/* 表格滚动区 */
.table-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
}

/* 表格样式 */
:deep(.ant-table) {
    // border: 1px solid red;
}

:deep(.ant-table-thead > tr > th) {
    background: #f4f8fd;
    color: #333;
    border-color: #d9d9d9;
    font-weight: 600;
    height: 40px;
    padding: 8px 12px;
}

:deep(.ant-table-tbody > tr > td) {
    border-color: #d9d9d9;
    height: 40px;
    padding: 8px 12px;
}

/* 底部：全选 + 分页 */
.table-footer {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 8px;
    border-top: 1px solid #eaeaea;
    background: #fff;
    flex-wrap: nowrap;

    .stat {
        margin-right: 12px;
        color: #666;
        white-space: nowrap;
    }

    .right {
        flex: 1 1 auto;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        min-width: 0;
        gap: 8px;
        overflow-x: auto;
        overflow-y: hidden;
    }
}

/* 自定义“条/页”按钮样式 */
.psize-btn {
    padding: 0 12px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.caret {
    font-size: 12px;
    color: #999;
}
</style>

<!-- <style lang="less" scoped>
.tab-scaffold {
    background: #fff;
    border: 1px solid #eaeaea;
    border-radius: 6px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    min-height: 83vh;
    min-width: 0;
}

/* 顶部工具栏 */
.toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 10px;

    .left :deep(.ant-btn) {
        padding: 0 14px;
        height: 30px;
        border-color: #1677ff;
        color: #1677ff;
    }

    .right {
        display: flex;
        align-items: center;
    }
}

/* 表格滚动区 */
.table-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
}

/* 表格样式 */
:deep(.ant-table) {
    border: 1px solid #d9d9d9;
}

:deep(.ant-table-thead > tr > th) {
    background: #f4f8fd;
    color: #333;
    border-color: #d9d9d9;
    font-weight: 600;
    height: 40px;
    padding: 8px 12px;
}

:deep(.ant-table-tbody > tr > td) {
    border-color: #d9d9d9;
    height: 40px;
    padding: 8px 12px;
}

/* 底部：全选 + 分页 */
.table-footer {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 8px;
    border-top: 1px solid #eaeaea;
    background: #fff;
    flex-wrap: nowrap;

    .stat {
        margin-right: 12px;
        color: #666;
        white-space: nowrap;
    }

    .right {
        flex: 1 1 auto;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        min-width: 0;
        gap: 8px;
        overflow-x: auto;
        overflow-y: hidden;
    }
}

/* 自定义“条/页”按钮样式 */
.psize-btn {
    padding: 0 12px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.caret {
    font-size: 12px;
    color: #999;
}
</style> -->
